<template>
	<view class="shoppingCart" >
		<view class="cart" >
			<view class="image">
				<img v-if="shoppingList.length == 0" src="../static/btn_waiter_nor.png" alt="" style="width: 120rpx;height: 120rpx; margin-top: -30rpx; margin-left: 20rpx;"/>
				<img v-else src="../static/btn_waiter_sel.png" alt="" style="width: 120rpx;height: 120rpx; margin-top: -30rpx; margin-left: 20rpx;"/>
			</view>
			<view class="sum" style="">
				￥{{sum}}
			</view>
			<view class="sub"  @click="sub()">
				<!-- 去结算 -->
				<button v-if="shoppingList.length == 0" style="border-radius: 50rpx;height: 86%;background-color: #000;color: #000;width: 200rpx;font-size: 30rpx;">去结算</button>
				<button v-else-if="page == 'pay'" style="border-radius: 50rpx;height: 86%;background-color: #007AFF;color: #fff;width: 200rpx;font-size: 30rpx;">去支付</button>
				<button v-else style="border-radius: 50rpx;height: 86%;background-color: #007AFF;color: #fff;width: 200rpx;font-size: 30rpx;">去结算</button>
			</view>
		</view>
	</view>
</template>

<script>
import {shoppingCartList} from '@/api/shoppingCart.js'
import {queryDefaultAddress} from '@/api/adress.js'
import {submit} from '@/api/order.js'
import {cleanRedis} from '@/api/common.js'
	export default {
		name:"shoppingCart",
		props: ['page'],
		data() {
			return {
				show:false,
				shoppingList:[]
			};
		},
		onReady(){
			this.init()
		},
		watch:{
			'$store.state.shoppingCartChange':function(newVal){
				this.init()
			},
			'$store.state.loginShow':function(newVal){
				this.init()
			}
		},
		computed:{
			sum:function(){
				let sum = 0
				if(this.shoppingList != null)
					this.shoppingList.forEach(function (item, index){
						sum = sum + item.amount * item.number
					})
				this.$store.state.shoppingCartSum = sum
				// console.log(this.$store.state.shoppingCartSum)
				return sum + this.$store.state.delivery
				
			}
		},
		methods:{
			init(){
				shoppingCartList(this.$store.state.storeId).then(res=>{
					this.shoppingList = res.data
					console.log('shoppingList',this.shoppingList)
				})
			},
			handle(type) {
				this.show = !this.show
				this.modeClass = type
			},
			shoppingCart(type){
				this.show = true
				this.show2 = !this.show2
				this.modeClass = type
				// console.log("clike")
			},
			async sub(){
				if(this.shoppingList.length == 0){
					return 
				}
				
				if(this.page == 'pay'){
					let res = await queryDefaultAddress();
					const addressId = res.data.id
					//下单
					const config = {
						addressBookId: addressId,
						amount: this.$store.state.shoppingCartSum,
						deliveryStatus: 0,
						estimatedDeliveryTime: this.$store.state.estimatedDeliveryTime,
						packAmount: 6,
						payMethod: 0,
						remark: this.$store.state.remark,
						storeId: this.$store.state.storeId,
						tablewareNumber: 0,
						tablewareStatus: 0
					}
					console.log(config)
					
					submit(config).then(res=>{
						uni.showToast({
							title:'下单成功'
						})
						let orderVO = res.data
						//清除缓存
						// cleanRedis()
						uni.navigateTo({
							url:'/pages/'+this.page+'/'+this.page + '?orderVO=' + encodeURIComponent(JSON.stringify(orderVO))
						})
					}).catch(err=>{
						uni.showToast({
							title:'下单失败'
						})
					})
					
					
				}else{
					
					uni.navigateTo({
						url:'/pages/'+this.page+'/'+this.page
					})
				}

			},
		}
	}
</script>

<style scoped>
.cart{
	/* margin-top: 500rpx;	 */
	/* border: solid; */
	background: #191919;
	height: 90rpx;
	width: 90%;
	position: fixed;
	left: 35rpx;
	/* top: 1200rpx; */
	/* bottom: 300rpx; */
	bottom: 60rpx;
	border-radius: 50rpx;
	display: flex;
	justify-content: space-between;
	z-index: 99999999;
}

.sum{
	color: white;
	line-height: 90rpx;
	font-size: 36rpx;
	margin-left: -260rpx;
}

.sub{
	color: white;
	line-height: 90rpx;
	margin-right: 8rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	
}

.shopping{
	height: 320rpx;
	width: 80%;
	/* border: solid; */
	position: fixed;
	left: 64rpx;
	top: 900rpx;
	border-radius: 15rpx;
	background: #fff;
	z-index: 5;
}

.top{
	display: flex;
	justify-content: space-between;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 26rpx;
	padding: 10rpx;
	color: gray;
}

</style>